<template>
  <AutoScreenContainer :height="1878">
    <div class="content">
      <div class="left">
        <img
          src="https://ruan30-1318331856.cos.ap-guangzhou.myqcloud.com/05.png"
          alt=""
        />
      </div>
      <div class="right">
        <span class="title_box">
          <span class="big_title">欢迎登录可视化看板</span>
          <span class="small_title">WELCOME!</span>
          <div class="form">
            <div class="input">
              <el-icon
                color="rgba(7, 40, 185, 1)"
                size="48"
                style="margin-left: 32px"
                ><Iphone
              /></el-icon>
              <div class="line"></div>
              <input type="num" v-model="phone" placeholder="请输入电话号码" />
            </div>
            <div style="height: 70px"></div>
            <div class="input">
              <el-icon
                color="rgba(7, 40, 185, 1)"
                size="48"
                style="margin-left: 32px"
                ><Position
              /></el-icon>
              <div class="line"></div>
              <input
                type="num"
                v-model.trim="email"
                placeholder="请输入QQ邮箱"
              />
              <el-button
                type="primary"
                size="large"
                :icon="Message"
                style="
                  font-size: 30px;
                  height: 100%;
                  transform: translateX(-45%);
                "
                @click="sendEmail"
                v-if="!isClick"
                >发送验证码</el-button
              >
              <el-button
                v-else
                type="primary"
                size="large"
                style="
                  font-size: 30px;
                  height: 100%;
                  transform: translateX(-15%);
                "
                :loading="isClick"
              >
                <template #loading>
                  <div class="custom-loading">
                    <svg class="circular" viewBox="-10, -10, 50, 50">
                      <path
                        class="path"
                        d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                        style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
                      />
                    </svg>
                  </div>
                </template>
                <div style="width: 113px; padding: 0 19px">{{ time }}s</div>
              </el-button>
            </div>
            <div style="height: 70px"></div>
            <div class="input">
              <el-icon
                color="rgba(7, 40, 185, 1)"
                size="48"
                style="margin-left: 32px"
                ><Key
              /></el-icon>
              <div class="line"></div>
              <input type="num" v-model.trim="Code" placeholder="请输入邮箱验证码" />
            </div>
          </div>
          <div class="checkBtn">
            <el-checkbox
              v-model="checked1"
              label="记住手机号"
              size="large"
              style="font-size: 72px; height: 56px"
            />
            <el-checkbox v-model="checked2" label="记住邮箱" size="large" />
          </div>
        </span>
        <div style="height: 80px"></div>
        <!-- 按钮 -->
        <div class="sabmit" @click="sabmit">登录</div>
      </div>
    </div>
  </AutoScreenContainer>
</template>

<script setup>
import AutoScreenContainer from "@/components/common/AutoScreenContainer.vue";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const phone = ref(null);
const email = ref(null);
// 是否点击了发送邮件
const isClick = ref(false);
// 倒计时
const time = ref(60);

// 发送验证码
const sendEmail = async () => {
  if (email.value == null) {
    ElMessage({
      message: "邮箱不能为空！",
      type: "warning",
    });
    return;
  }
  if (phone.value == null) {
    ElMessage({
      message: "号码不能为空！",
      type: "warning",
    });
    return;
  }
  // 验证邮箱是否正确
  // 邮箱正则
  const emailReg = /^[1-9]\d{4,10}@qq\.com$/;
  if (emailReg.test(email.value)) {
    // 开启倒计时
    isClick.value = true;
    startTime();
    const json = await proxy.postByUrl("/getVerifyCode", {
      email: email.value,
      phone: phone.value,
    });
    console.log(json);
    if (json.status !== 200) {
      ElMessage({
        message: json.data,
        type: "error",
      });
      return;
    }
    ElMessage({
      message: json.data,
      type: "success",
    });
  } else {
    ElMessage({
      message: "邮箱格式不正确，请重新输入！",
      type: "error",
    });
  }
};
// 开启倒计时
const startTime = () => {
  const timer = setInterval(() => {
    if (time.value > 0) {
      time.value--;
    } else {
      isClick.value = false;
      time.value = 60;
      clearInterval(timer);
    }
  }, 1000);
};
const Code = ref(null);
// 登录
const sabmit = async () => {
  console.log('denglll');
  if (Code.value == null) {
    ElMessage({
      message: "验证码不能为空！",
      type: "warning",
    });
    return
  }
  if (phone.value == null) {
    ElMessage({
      message: "号码不能为空！",
      type: "warning",
    });
    return;
  }
  if (email.value == null) {
    ElMessage({
      message: "邮箱不能为空！",
      type: "warning",
    });
  }
  const params = {
    email: email.value,
    phone: phone.value,
    code: Code.value,
  }
  // 发请求验证
  const json = await proxy.postByUrl('/dateScreenLogin',params)
  console.log(json);
  if (json.status!==200) {
    ElMessage({
      message: json.data,
      type: "error",
    });
    return;
  }
  // 如果成功把数据存到sessionStorage 然后路由跳转
  sessionStorage.setItem('user',JSON.stringify(json.data))
  router.push({
    name:'facescreen'
  })
};

const checked1 = ref(false);
const checked2 = ref(false);
onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
});
</script>
<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  position: relative;
  background: url(https://ruan30-1318331856.cos.ap-guangzhou.myqcloud.com/%E5%BE%AE%E8%BD%AF%E9%A3%8E%E8%83%8C%E6%99%AF.jpg.png);
  .left {
    width: 100%;
    height: 100%;
    img {
      height: 100%;
    }
  }
  .right {
    position: absolute;
    right: 408px;
    padding: 112px 96px;
    top: 50%;
    border-radius: 40px;
    transform: translateY(-50%);
    width: 962px;
    height: 1202px;
    background-color: #dce8ff;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1),
      0px 17px 36px rgba(23, 57, 222, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .title_box {
      display: flex;
      flex-direction: column;
      .big_title {
        /** 文本1 */
        font-size: 60px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 52.13px;
        color: rgba(2, 17, 43, 1);
        text-align: left;
        vertical-align: top;
        line-height: 100px;
      }
      .small_title {
        /** 文本1 */
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 23.17px;
        color: rgba(2, 17, 43, 1);
        text-align: left;
        vertical-align: top;
      }
      .form {
        margin-top: 70px;
        .input {
          width: 758px;
          height: 110px;
          opacity: 1;
          border-radius: 16px;
          background: rgba(193, 210, 255, 0.4);
          display: flex;
          align-items: center;
          .line {
            height: 56px;
            margin-left: 32px;
            border: 1px solid rgba(7, 40, 185, 1);
          }
          input {
            margin-left: 32px;
            border: none;
            height: 56px;
            background-color: transparent;
            font-size: 40px;
            color: rgba(7, 40, 185, 1);
          }
        }
      }
      .checkBtn {
        font-size: 72px;
        height: 56px;
      }
    }
    .sabmit {
      cursor: pointer;
      height: 110px;
      opacity: 0.8;
      border-radius: 16px;
      background: rgba(26, 48, 222, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      color: rgba(255, 255, 255, 1);
      // padding: 13px 149px 13px 149px;
    }
  }
}
</style>
